<template>
  <BaseMainSlot>
    <template v-slot:btnsBar>
      <el-button type="primary" class="botton" @click="addRoot">添加</el-button>
      <!-- <el-button type="primary" class="botton">删除</el-button> -->
    </template>
    <template v-slot:content>
      <!-- 物料树结构 -->
      <el-tree
        ref="tree"
        :data="treeData"
        show-checkbox
        default-expand-all
        :props="defaultProps"
        @check="handleSelectionChange"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node all">
          <div>{{ node.label }}</div>
          <div class="one">
            <div class="add" @click.stop="() => append(data)">
              添加
              <span class="el-icon-circle-plus-outline"></span>
            </div>
            <div class="edit" @click.stop="() => modify(data)">
              修改
              <span class="el-icon-edit-outline"></span>
            </div>
            <div class="del" @click.stop="() => remove(node, data)">
              删除
              <span class="el-icon-delete"></span>
            </div>
          </div>
        </div>
      </el-tree>
      <!-- 物料分类添加修改弹出框 -->
      <el-dialog :title="titleText" :visible.sync="dialogFormVisible">
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item label="物料类型名称：" prop="materialTypeName" class="w50p">
            <el-input v-model="formData.materialTypeName" />
          </el-form-item>
        </el-form>
        <div v-if="nowChanceStau !== ''" slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="save('formData')"
          >保 存</el-button>
        </div>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/kong-new.vue";
import materialTypeApi from "@/api/processing-management/basic-info-manage/material-type-manage/index";
export default {
  name: "MaterialTypeManage",
  components: { BaseMainSlot },
  data() {
    return {
      treeData: [],
      selectedStaffList: [],
      defaultProps: {
        children: "child",
        label: "materialTypeName"
      },
      formData: {},
      rules: {
        materialTypeName: [
          {
            required: true,
            message: "请输入产品规格",
            trigger: ["change", "input", "blur"]
          }
        ]
      },
      titleText: "",
      nowChanceStau: false,
      dialogFormVisible: false
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getTreeList();
  },
  methods: {
    // 添加根节点
    addRoot() {
      this.formData = {};
      this.nowChanceStau = "add";
      this.titleText = "添加物料类型";
      this.dialogFormVisible = true;
    },
    handleSelectionChange() {},
    // 请求物料分类树数据
    getTreeList() {
      materialTypeApi.TreeStructure().then(res => {
        console.log(res);
        if (res.code === 1) {
          this.treeData = res.data;
        }
      });
    },
    // 添加子节点
    append(data) {
      this.formData = {};
      this.nowChanceStau = "add";
      this.titleText = "添加物料类型";
      this.dialogFormVisible = true;
      this.formData.parentNo = data.materialTypeNo;
    },
    // 修改当前节点
    modify(data) {
      this.formData = { ...data };
      console.log(this.formData);
      this.nowChanceStau = "edit";
      this.titleText = "修改供应商类型";
      this.dialogFormVisible = true;
    },
    // 删除当前节点
    remove(node, data) {
      console.log(data);
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass"
      })
        .then(() => {
          materialTypeApi.numberDel(data.materialTypeNo).then(res => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.getTreeList();
            } else {
              this.$message.warning(res.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    // 弹框保存
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            materialTypeApi.edit(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "修改成功！");
                this.getTreeList();
                this.dialogFormVisible = false;
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            materialTypeApi.add(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success(res.msg || "新增成功！");
                this.dialogFormVisible = false;
                this.getTreeList();
                this.$refs[formData].resetFields();
              } else {
                this.$message.error(res.msg || "新增失败！");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-tree-node__children .el-tree-node__content {
  margin-left: 1%;
  width: 99%;
}
.botton {
  background-color: #0091b7;
}
.el-form {
  padding: 24px 24px;
}

.all {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .one {
    display: flex;
    div {
      border-radius: 4px;
      height: 26px;
      line-height: 24px;
      border: 1px solid #fff;
      padding: 0px 6px;
      margin-right: 10px;
    }
    .add {
      &:hover {
        color: #fff;
        background-color: rgb(65, 227, 51);
      }
    }
    .edit {
      &:hover {
        color: #fff;
        background-color: rgb(218, 207, 50);
      }
    }
    .del {
      &:hover {
        color: #fff;
        background-color: rgb(232, 92, 82);
      }
    }
  }
}
</style>
